import Base from '../base.js';

import IndentApi from '../../api/indent.js'
import TheatersApi from '../../api/theaters.js'
import ScheduleIdApi from '../../api/schedules.js'
import _ from 'lodash';

export default class extends Base {
  data = {
    curPage: 1, //当前页
    eachPage: 5, //每页显示条数
    total: 0, //总条数
    maxPage: 0, //总页数

    rows: []
  };

  render() {

    this.$el.html(`
        <div>
        <h1>订单系统</h1>
       
        <form class="layui-form" action="">
        <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="name" value="" autocomplete="off" class="layui-input" style="width:300px"  placeholder="请输入查找的用户">
         
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="get">查找用户</button>
        <button class="layui-btn" lay-submit lay-filter="getAll">全部</button>
        </div>
    </div>
        </form> 
       
         <table id="demo" lay-filter="test"></table>
         <div id="test1"></div>
        `)
    this.chenckEle = $('.checkIndent')
    this.addIndentEle = $('.addIndent')

    this.formEle = layui.form;
    this.table = layui.table;

    //第一个实例

    this.table.render({

      elem: '#demo',
      cols: [
        [ //表头
          {
            field: '_id',
            title: '订单号',
            fixed: 'left'
          },
          {
            field: 'usersNameId',
            title: '用户',
            templet: (res) => {
            console.log( res );
              let usersNameId = res.usersNameId
              return usersNameId?.userName ? usersNameId.userName : ""

            }
          },
          {
            field: 'movieId',
            title: '电影',
            templet: (res) => {
              let movieId = res.movieId
              return movieId.cname 
            }
          },
          {
            field: 'cinemasId',
            title: '电影院',
            templet: (res) => {
              let cinemasId = res.cinemasId
              return cinemasId.name 

            }
          },
          {
            field: 'theatersId',
            title: '放映厅',
            templet: (res) => {
              let theatersId = res.theatersId
              return theatersId?.name ? theatersId.name : ""

            }
          },
          {
            field: 'showTime',
            title: '放映时间',
            templet: (res) => {
              let schedulesId = res.schedulesId
              return `${schedulesId?.date ? schedulesId.date : "" } ${schedulesId?.showTime ? schedulesId.showTime : "" } `

            }
          },
          {
            field: 'seatingId',
            title: '座位选号',
            templet: (res) => {
            
              let seatingId = res.seatingId
           
              return `${seatingId?.row?seatingId.row:'' } ${seatingId?.col?seatingId.col:'' }`?`${seatingId.row }排 ${seatingId.col } 号`:''
            }
          },
          {
            field: 'schedulesId',
            title: '价格',
            templet: (res) => {
              let schedulesId = res.schedulesId
              return schedulesId?.price ? schedulesId.price : ""

            }
          },

        ]
      ]
    });
  }

  async check() {
    console.log('查看');
    location.hash = ' #/info/checkIndent'
  }

  //新增
  async addIndent() {
  
    const {
      curPage,
      eachPage
    } = this.data;
    this.data = await IndentApi.inCur({
      curPage,
      eachPage
    });
    this.rereder()
  }
  handle() {

    this.chenckEle.on('click', this.check.bind(this));
    //查找
    this.formEle.on('submit(get)', (data) => {
           this.table.cache.demo=[]
      IndentApi.getIndentOne(data.field).then(res => {
          this.table.cache.demo = res;
          this.rereder();
      })
      return false;
  });
  // 显示全部
  this.formEle.on('submit(getAll)', () => {
    this.getIndent()
    this.table.reload('demo', {
      data: this.table.cache.demo
    });
  }

);
  }
  async getIndent() {
   

    this.table.cache.demo = await IndentApi.get();
   
      this.rereder()

  }
  rereder() {
    //渲染
    this.table.reload('demo', {
      data:  this.table.cache.demo
    });
 
    //分页
    this.laypage = layui.laypage;
    //执行一个laypage实例
    this.laypage.render({
      elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
        ,
      count: this.data.total //数据总数，从服务端得到
        ,
      limit: this.data.eachPage,
      limits: [5, 10, 15],
      curr: this.data.curPage,
      layout: ['prev', 'page', 'next', "groups", "count", "limit"],
      jump: async (obj, first) => {
        //obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); //得到每页显示的条数

        //首次不执行
        if (!first) {
          this.data.curPage = obj.curr;
          this.data.eachPage = obj.limit;

          const {
            curPage,
            eachPage
          } = this.data;
          this.data = await IndentApi.inCur({
            curPage,
            eachPage
          });

          this.table.reload('demo', {
           data: this.table.cache.demo,
            limit: this.data.eachPage
          });
        }
      }
    });
  }


  mounted() {
    this.getIndent()
    this.addIndent()
  }
}